<template>
  <div class="main">
    <div class="container">
      <div class="left">
        <!-- 菜单栏头部 -->
        <div class="header">
          <div class="bg">
            <img src="/images/logo.svg" />
          </div>
          <div class="title"><img src="/images/title.svg" /></div>
        </div>
        <!-- 菜单栏导航 -->
        <div class="nav">
          <div class="body">
            <!-- 导航栏 -->
            <div class="navgation">
              <div class="title">导航</div>
              <x-meun v-model="activeLabel">
                <x-meun-item
                  v-for="(item, index) in navData"
                  :label="item.path.slice(1)"
                  :key="index"
                  :text="item.name"
                  :svg="item.svgComponent"
                  @click.native="handleMeunItemClick(item.path)"
                >
                </x-meun-item>
              </x-meun>
            </div>
            <!-- 销售渠道 -->
            <div class="sale">
              <div class="title">销售渠道</div>
              <x-meun v-model="activeLabel">
                <x-meun-item
                  v-for="(item, index) in saleData"
                  :label="item.path.slice(1)"
                  :key="index"
                  :text="item.name"
                  :svg="item.svgComponent"
                  :path="item.path"
                  @click.native="handleMeunItemClick(item.path)"
                >
                </x-meun-item>
              </x-meun>
            </div>
            <!-- 其他 -->
            <div class="other">
              <x-meun v-model="activeLabel">
                <x-meun-item
                  v-for="(item, index) in otherData"
                  :label="item.path.slice(1)"
                  :key="index"
                  :text="item.name"
                  :svg="item.svgComponent"
                  :path="item.path"
                  @click.native="handleMeunItemClick(item.path)"
                >
                </x-meun-item>
              </x-meun>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 头部信息 -->
        <div class="header">
          <!-- 输入框 -->
          <div class="input">
            <input type="text" placeholder="搜索" />
            <img src="/images/搜索.svg" alt="" />
          </div>
          <div class="my">
            <!-- 消息 -->
            <div class="message">
              <i class="el-icon-bell"></i>
            </div>
            <!-- 我的账户 -->
            <div class="account">
              <img src="/images/头像.png" alt="" />
              <div class="name">{{ this.$store.state.login.userInfo.username }}</div>
              <div class="arrow">
                <i class="el-icon-arrow-down"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 二级路由展示区域 -->
        <div class="body">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Main',
    data() {
      return {
        transiton: 0.3,
        // 菜单栏数据
        navData: [
          {
            name: '数据看板',
            svgComponent: 'dashboard-svg',
            path: '/dashboard',
          },
          {
            name: '订单',
            svgComponent: 'orders-svg',
            path: '/orders',
          },
          {
            name: '商品列表',
            svgComponent: 'product-list-svg',
            path: '/product-list',
          },
          {
            name: '运营数据',
            svgComponent: 'operation-data-svg',
            path: '/operation-data',
          },
          {
            name: '促销营销',
            svgComponent: 'promotion-svg',
            path: '/promotion',
          },
        ],
        saleData: [
          {
            path: '/ordered-app',
            name: '订购的应用',
            svgComponent: 'ordered-app-svg',
          },
          {
            path: '/my-shop',
            name: '我的店铺',
            svgComponent: 'my-shop-svg',
          },
          {
            path: '/discount',
            name: '折扣',
            svgComponent: 'discount-svg',
          },
        ],
        otherData: [
          {
            path: '/setting',
            name: '设置',
            svgComponent: 'setting-svg',
          },
          {
            path: '/help',
            name: '帮助',
            svgComponent: 'help-svg',
          },
        ],
      }
    },
    computed: {
      activeLabel: {
        get() {
          return this.$route.name
        },
        set(val) {
          this.$router.push(val)
        },
      },
    },
    methods: {
      handleMeunItemClick(path) {
        // 跳转到对应路由
        this.$router.push(`/main${path}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
  // 动画时间，与传入组件的transition属性保持一致
  $transition-duration: 0.3s;

  .main {
    padding: 15px 16px 34px 24px;
  }
  .container {
    display: flex;
    height: calc(100vh - 15px - 34px);
    min-height: 810px;
    // background-color: salmon;
  }

  .left {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    border-radius: 24px;
    background-color: #fff;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 162.74px;
      height: 32px;
      margin-left: 17.23px;
      margin-top: 34px;

      .bg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 31px;
        height: 32px;
        background-image: url('../../../public/images/logo-bg.png');
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .nav {
      .title {
        margin-top: 36.5px;
        margin-left: 24px;

        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 19.2px;
        color: rgba(160, 174, 192, 1);
        text-align: left;
        vertical-align: middle;
      }
      .body {
        margin-top: 9.5px;
        .title {
          width: 48px;
          height: 20px;
          margin-bottom: 10px;
          opacity: 1;
          /** 文本1 */
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 19.2px;
          color: rgba(160, 174, 192, 1);
          text-align: left;
          vertical-align: middle;
        } // background-color: seagreen;
        .navgation {
          width: 200px;
          height: 300px;
        }

        .sale {
          width: 200px;
          height: 155px;
        }

        .other {
          margin-top: 51px;
          width: 200px;
          height: 108px;
        }
      }
    }
  }

  .right {
    margin-left: 24px;
    flex-grow: 1;
    min-width: 800px;
    .header {
      margin-bottom: 48px;
      display: flex;
      justify-content: space-between;
      .input {
        position: relative;
        input {
          box-sizing: border-box;
          width: 412px;
          height: 48px;
          padding-left: 55px;
          outline: none;
          border: 0;
          border-radius: 14px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 22.4px;

          &::placeholder {
            /** 文本1 */
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22.4px;
            color: rgba(125, 133, 146, 1);
          }
        }
        img {
          position: absolute;
          top: 12px;
          left: 19px;
        }
      }
      .my {
        display: flex;
        height: 48px;

        .message {
          cursor: pointer;
          margin-right: 24px;
          i {
            width: 48px;
            height: 48px;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            line-height: 48px;
            background-color: #fff;
            border-radius: 14px;
          }
        }
        .account {
          cursor: pointer;
          display: flex;
          width: 48px;
          width: 192px;
          border-radius: 14px;
          margin-right: 24px;
          background-color: #fff;

          img {
            display: block;
            width: 30px;
            height: 30px;
            margin-left: 14px;
            margin-top: 9px;
            border-radius: 50%;
          }
          .name {
            margin-top: 12.5px;
            margin-left: 7px;
            width: 112px;
            height: 23px;
          }
          .arrow {
            margin-top: 12px;
            i {
              width: 24px;
              height: 24px;
              text-align: center;
              font-weight: 700;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
</style>
